<template>
  <div style="width: 1100px;margin: 0 auto">
    <a-row type="flex" justify="center" align="middle" :style="{backgroundColor:'#fff',borderRadius:'4px'}">
      <a-col :span="22">
        <a-steps
          size="small"
          :current="current"
          :style="{marginTop:'16px',marginBottom:'5px'}"
          @change="onChange">
          <a-step title="店铺认证" description="您的店铺未认证"/>
          <a-step title="缴纳保证金" description="请缴纳保证金"/>
          <a-step title="发布商品" description="发布1件商品"/>
        </a-steps>
        <a-button
          type="primary"
          @click="alert('click')"
          :style="{borderRadius: '3px',marginLeft:'20px',marginBottom: '16px'}"
          size="small"
          ghost>
          立即认证
        </a-button>
      </a-col>
    </a-row>

    <a-row
      :style="{backgroundColor:'#fff',borderRadius:'4px',marginTop: '16px',padding:'10px 20px'}">
      <a-col :span="8">
        <span style="font-weight: bold;color: black">公 告</span>
        <a-divider type="vertical"/>
        <a-badge
          count="1"
          :number-style="{
            backgroundColor: '#f0f9ff',
            color: '#1966ff'
          }">
        </a-badge>
        <span style="font-size: 12px;margin-left: 3px;" class="href" @click="alert1Click"> 商品管理工具，助您轻松上架商品</span>
      </a-col>
      <a-col :span="8">
        <a-badge
          count="2"
          :number-style="{
            backgroundColor: '#f0f9ff',
            color: '#1966ff'
          }">
        </a-badge>
        <span style="font-size: 12px;margin-left: 3px" class="href" @click="alert2Click"> 下载飞书，抢限时官方群入群资格</span>
      </a-col>
      <a-col :span="8">
        <a-badge
          count="3"
          :number-style="{
            backgroundColor: '#f0f9ff',
            color: '#1966ff'
          }">
        </a-badge>
        <span style="font-size: 12px;margin-left: 3px" class="href" @click="alert3Click"> 直播带货营销攻略火热来袭！助您销量一飞冲天</span>
      </a-col>
    </a-row>

    <a-row
      :style="{marginTop: '16px',marginLeft:'0px',marginRight:'0px'}">
      <a-col :span="16">
        <div :style="{backgroundColor:'#fff',borderRadius:'4px',marginRight: '16px',padding: '8px'}">
          <div
            style="margin-top: 8px;
            margin-left: 16px;
            height: 24px;
            font-size: 16px;
            font-weight: 600;
            color: #19191a;
            line-height: 24px;">待办事项
          </div>
          <a-row :gutter="[8,8]">
            <a-col :span="6">
              <div
                style="height: 72px;
                  margin-left: 40px;
                  margin-top: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  待确认 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 24px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  5
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="height: 72px;
                  margin-left: 40px;
                  margin-top: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  待支付 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 24px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  3
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="height: 72px;
                  margin-left: 40px;
                  margin-top: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  备货中 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 24px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  15
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="height: 72px;
                  margin-left: 40px;
                  margin-top: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  当日违规提醒 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 24px;
                    font-weight: 500;
                    color: rgb(255, 64, 80);
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  1
                </div>
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="[8,8]">
            <a-col :span="6">
              <div
                style="height: 72px;
                  margin-left: 40px;
                  margin-top: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  未回复服务请求 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 24px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  3
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="height: 72px;
                  margin-left: 40px;
                  margin-top: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  退款凭证上传 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 24px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  2
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="height: 72px;
                  margin-left: 40px;
                  margin-top: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  退款处理 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 24px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  3
                </div>
              </div>
            </a-col>
            <a-col :span="6"/>
          </a-row>
        </div>
        <div :style="{backgroundColor:'#fff',borderRadius:'4px',marginRight: '16px',padding: '8px',marginTop: '16px'}">
          <div
            style="margin-top: 8px;
            margin-left: 16px;
            height: 24px;
            font-size: 16px;
            font-weight: 600;
            color: #19191a;
            line-height: 24px;">运营数据
            <span style="font-size: 12px;color: #707173;font-weight: 500;">
              昨日数据
            </span>
            <span style="font-size: 12px;color: #707173;font-weight: 500;float: right;margin-right: 8px">
              更新时间：2020/9/3
            </span>
          </div>
          <a-row :gutter="[8,8]">
            <a-col :span="6">
              <div
                style="margin-left: 40px;
                  margin-top: 24px;
                  margin-bottom: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  生单数 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 20px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  22
                </div>
                <div
                  style="font-size: 12px;
                    font-weight: 500;
                    color: #707173;
                    font-family: DIN-Medium, DIN;">
                  日环比 +2
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="margin-left: 40px;
                  margin-top: 24px;
                  margin-bottom: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  生单金额 >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 20px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  1500.00
                </div>
                <div
                  style="font-size: 12px;
                    font-weight: 500;
                    color: #707173;
                    font-family: DIN-Medium, DIN;">
                  日环比 +200.00
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="margin-left: 40px;
                  margin-top: 24px;
                  margin-bottom: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  咨询人数(IM) >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 20px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  53
                </div>
                <div
                  style="font-size: 12px;
                    font-weight: 500;
                    color: #707173;
                    font-family: DIN-Medium, DIN;">
                  日环比 +12
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="margin-left: 40px;
                  margin-top: 24px;
                  margin-bottom: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  咨询次数(IM) >
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 20px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  78
                </div>
                <div
                  style="font-size: 12px;
                    font-weight: 500;
                    color: #707173;
                    font-family: DIN-Medium, DIN;">
                  日环比 +22
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
        <div :style="{backgroundColor:'#fff',borderRadius:'4px',marginRight: '16px',padding: '8px',marginTop: '16px'}">
          <div
            style="margin-top: 8px;
            margin-left: 16px;
            height: 24px;
            font-size: 16px;
            font-weight: 600;
            color: #19191a;
            line-height: 24px;">资金数据
            <span style="font-size: 12px;color: #707173;font-weight: 500;float: right;margin-right: 8px">
              更新时间：2020/9/4 21:23:51
            </span>
          </div>
          <a-row :gutter="[8,8]">
            <a-col :span="6">
              <div
                style="margin-left: 40px;
                  margin-top: 24px;
                  margin-bottom: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  保证金余额
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 20px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  ****
                </div>
                <div
                  style="font-size: 12px;
                    font-weight: 500;
                    color: #1966ff;
                    font-family: DIN-Medium, DIN;">
                  充值
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="margin-left: 40px;
                  margin-top: 24px;
                  margin-bottom: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  可提现金额
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 20px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  ****
                </div>
                <div
                  style="font-size: 12px;
                    font-weight: 500;
                    color: #1966ff;
                    font-family: DIN-Medium, DIN;">
                  提现
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div
                style="margin-left: 40px;
                  margin-top: 24px;
                  margin-bottom: 24px;
                  cursor: pointer;
                  user-select: none;">
                <div
                  style="height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #19191a;
                    line-height: 20px;">
                  待缴佣金
                </div>
                <div
                  style="margin-top: 8px;
                    height: 32px;
                    font-size: 20px;
                    font-weight: 500;
                    color: #19191a;
                    width: 26px;
                    font-family: DIN-Medium, DIN;
                    line-height: 32px;">
                  ****
                </div>
                <div
                  style="font-size: 12px;
                    font-weight: 500;
                    color: #1966ff;
                    font-family: DIN-Medium, DIN;">
                  缴纳
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>

      <a-col :span="8">
        <div :style="{backgroundColor:'#fff',borderRadius:'4px',padding: '8px'}">
          <div
            style="margin-left: 16px;
              margin-top: 8px;
              height: 24px;
              line-height: 24px;
              font-size: 16px;
              font-weight: 600;
              color: #19191a;">
            店铺等级
            <span
              style="display: inline-block;
                margin: 0 16px 0 2px;
                font-size: 16px;
                font-weight: 600;
                color: #707173;
                line-height: 22px;
                cursor: pointer;">
              LV1</span>
            <span
              class="ant-tag"
              style="background: rgb(227, 238, 252); color: rgb(25, 102, 255); border: none;font-weight: 500;">入驻中</span>
            <span
              style="float: right;
              margin-right: 8px;
              font-size: 12px;
              font-weight: 400;
              color: #707173;
              line-height: 20px;">
              <a-icon type="menu-unfold"/>
              经营类目
            </span>
          </div>
          <a-row
            type="flex"
            justify="center"
            align="middle"
            style="padding: 30px 0 5px 0">
            <a-col :span="7">
              用户口碑 <a-icon type="question-circle" />
            </a-col>
            <a-col :span="4">
              <a-progress type="circle" strokeColor="#FFBF40" :percent="90.6" :width="40" :format="percent => `${(percent/20).toFixed(2)}`"/>
            </a-col>
            <a-col :span="10" style="line-height: 14px;">
              <div>比昨日 0 -</div>
              <div>同行业平均标准4.53</div>
            </a-col>
          </a-row>
          <a-row
            type="flex"
            justify="center"
            align="middle"
            style="padding: 5px 0 5px 0">
            <a-col :span="7">
              服务态度 <a-icon type="question-circle" />
            </a-col>
            <a-col :span="4">
              <a-progress type="circle" strokeColor="#1966FF" :percent="93.6" :width="40" :format="percent => `${(percent/20).toFixed(2)}`"/>
            </a-col>
            <a-col :span="10" style="line-height: 14px;">
              <div>比昨日 0 -</div>
              <div>同行业平均标准4.68</div>
            </a-col>
          </a-row>
          <a-row
            type="flex"
            justify="center"
            align="middle"
            style="padding: 5px 0 30px 0">
            <a-col :span="7">
              发货速度 <a-icon type="question-circle" />
            </a-col>
            <a-col :span="4">
              <a-progress type="circle" strokeColor="#FF7919" :percent="93.4" :width="40" :format="percent => `${(percent/20).toFixed(2)}`"/>
            </a-col>
            <a-col :span="10" style="line-height: 14px;">
              <div>比昨日 0 -</div>
              <div>同行业平均标准4.67</div>
            </a-col>
          </a-row>
        </div>
        <div :style="{backgroundColor:'#fff',borderRadius:'4px',padding: '8px',marginTop:'16px'}">
          <div
            style="margin-left: 16px;
              margin-top: 8px;
              height: 24px;
              line-height: 24px;
              font-size: 16px;
              font-weight: 600;
              color: #19191a">
            推广
          </div>
          <div style="padding:30px 0 12px 20px; line-height: 12px">
            <p>广告投放 ></p>
            <p>字节全平台定向营销，获取海量流量</p>
          </div>
        </div>
        <div :style="{backgroundColor:'#fff',borderRadius:'4px',padding: '8px',marginTop:'16px'}">
          <div
            style="margin-left: 16px;
              margin-top: 8px;
              height: 24px;
              line-height: 24px;
              font-size: 16px;
              font-weight: 600;
              color: #19191a">
            营销工具
          </div>
          <a-row :gutter="[8,8]" style="padding: 20px">
            <a-col :span="6" style="text-align: center">
              <img src="@/assets/img/home1.png" style="width: 32px">
              <div>优惠券</div>
            </a-col>
            <a-col :span="6" style="text-align: center">
              <img src="@/assets/img/home2.png" style="width: 32px">
              <div>满减</div>
            </a-col>
            <a-col :span="6" style="text-align: center">
              <img src="@/assets/img/home3.png" style="width: 32px">
              <div>限时特卖</div>
            </a-col>
            <a-col :span="6" style="text-align: center">
              <img src="@/assets/img/home4.png" style="width: 32px">
              <div>定时开售</div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import leftImg from '@/assets/img/left.png'

export default {
  name: 'HomeDetail',
  data () {
    return {
      current: 0,
      leftImgUrl: leftImg
    }
  },
  methods: {
    onChange (current) {
      console.log('onChange:', current)
      this.current = current
    },
    alert1Click () {

    },
    alert2Click () {
      window.open('https://www.feishu.cn')
    },
    alert3Click () {
      window.open('https://opendoc.jinritemai.com/notice/4366/71883/')
    }
  }
}
</script>

<style scoped>
.href:hover {
  color: #1966ff;
  cursor: pointer;
}

._2EDrnuAYRMT75k2k82FuSF ._29alJBStpIFEJ-8fLEqXEH ._39TUqPnPczgizsai0e1N8L {
  color: #707173;
}

._2EDrnuAYRMT75k2k82FuSF ._29alJBStpIFEJ-8fLEqXEH .HhdY6ObFxjXSdoI9KchWw {
  font-size: 12px;
  font-family: DIN-Medium, DIN;
  font-weight: 500;
  line-height: 19px;
  margin-right: 2px;
}

._2RrP4rs8VntOzPupCaMKUP, ._2M9zbzXvq-FRrHsXMgMmqV, ._200BrQ0lDehHxMIxaGj5WJ {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 12px;
  height: 14px;
}
</style>
